import React from "react";

interface Props {
  title: string;
  children: React.JSX.Element;
  arrow?: boolean;
  onClick?: (...args: any) => void;
  active?: boolean;
  color?: string;
}

export const MenuButton = (props: Props) => {
  return (
    <>
      <div
        style={{ color: props.color ? props.color : "var(--color)" }}
        onClick={props.onClick}
        className={`HeaderDropDown${props.arrow ? " arrow" : " marginNext"}${
          props.active ? " active" : ""
        }`}
      >
        <span>{props.children}</span>
        <span style={{ whiteSpace: "nowrap" }}>{props.title}</span>
      </div>
    </>
  );
};
